<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <!-- Base Css Files -->
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/fontello/css/fontello.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/animate-css/animate.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/css/component.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style-responsive.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro.css" rel="stylesheet" type="text/css" />

        <!-- Extra CSS Files -->
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jquery-icheck/skins/all.css" rel="stylesheet" />

        <!-- Custom Css Files -->
        <link href="__ADMIN_CSS__/style.css"  rel="stylesheet" />
    </head>
    <body>
    <div>
        <div class="sub-header-title">
            <h2>银行列表</h2>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
          <div class="col-sm-12">
                    <a class="btn btn-success pull-right" href="javascript:;"  id="add-bank">添加银行</a>
                </div>
          </div>
        </div>
    </div>

    <div class="widget">
        <div class="widget-content">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                    	<th>银行名称</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="module_list">
                  <volist name="list" id="vo">
                    <tr data-id="{$vo.id}" data-status="{$vo.status}" data-title="{$vo.title}">
                            <td>{$vo.title}</td>
                            <td>{$vo.add_time}</td>
                            <td>
                            	<a class="edit-bank" href="javascript:;">修改</a> |
                                <a class="del-bank" href="javascript:;">删除</a>
              				</td>
                        </tr>
                  </volist>
              </tbody>
            </table>
            {$page}
        </div>
    </div>

  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery/jquery-1.11.1.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/js/bootstrap.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/jquery-ui-1.10.4.custom.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-ui-touch/jquery.ui.touch-punch.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-detectmobile/detect.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/fastclick/fastclick.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-slimscroll/jquery.slimscroll.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/classie.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/modalEffects.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/notify.min.js"></script>
    <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro-blue.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.min.js"></script>

  <!-- Extra Js Files -->
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-dragsort/jquery.dragsort-0.5.2.min.js"></script>

      <!-- Custom Js Files -->
    <script src="__ADMIN_JS__/common.js"></script>

    <script>
    //排序
    sort();

    //添加银行
    $('#add-bank').click(function(){
        window.parent.layer.open({
              type: 1, //page层
              title: '添加银行',
              area: ['450px', '200px'],
              btn: ['添加','取消'],
              content:'<div class="category-box">'
                        +'<div class="form-group">'
                            +'<label class="col-sm-3 control-label"><span class="red_star">*</span>名称：</label>'
                            +'<div class="col-sm-8">'
                            +'<input id="bank_title" class="form-control" />'
                            +'</div>'
                        +'</div>'
                        +'<div class="form-group">'
                          +'<label class="col-sm-3 control-label"></label>'
                          +'<div class="col-sm-8">'
                            +'<p class="help-block">必须在2~20个字符之间</p>'
                          +'</div>'
                      +'</div>'
                    +'</div>',
              yes: function(index,layero){
                var title = $.trim($(layero).find('#bank_title').val());
                if (!title) {
                  //弹出提示
              window.parent.layer.msg("名称不能为空");
                  return false;
                }
                if (title.length<2 || title.length>20) {
                  //弹出提示
              window.parent.layer.msg("名称必须在2~20个字符之间");
                  return false;
                }
                // 用ajax提交表单
                $.post("{:U('Cash/addBankType')}", 'title='+title, function(response) {
                  //弹出提示
              window.parent.layer.msg(response.message);

                  //根据请求相应状态提示通知
                  if(response.status){
                    notify("success",response.message);
                    window.parent.layer.close(index);
                window.location.reload();
              }else{
                notify("error",response.message);
              }
                }, 'json');
            }
      });
    });

    //修改银行
    $('.edit-bank').click(function(){
      var id = $(this).parents('tr').data("id");
      var title = $(this).parents('tr').data("title");
          window.parent.layer.open({
              type: 1, //page层
              title: '修改银行',
              area: ['450px', '210px'],
              btn: ['保存','取消'],
          content:'<div class="category-box">'
                      +'<div class="form-group">'
                            +'<label class="col-sm-3 control-label"><span class="red_star">*</span>名称：</label>'
                          +'<div class="col-sm-8">'
                            +'<input id="bank_title" class="form-control" value="'+title+'"/>'
                            +'</div>'
                      +'</div>'
                      +'<div class="form-group">'
                          +'<label class="col-sm-3 control-label"></label>'
                          +'<div class="col-sm-8">'
                            +'<p class="help-block">必须在2~20个字符之间</p>'
                          +'</div>'
                      +'</div>'
                  +'</div>',

              yes: function(index,layero){
                var title = $.trim($(layero).find('#bank_title').val());
                if (!title) {
                  //弹出提示
              window.parent.layer.msg("名称不能为空");
                  return false;
                }
                if (title.length<2 || title.length>20) {
                  //弹出提示
              window.parent.layer.msg("名称必须在2~20个字符之间");
                  return false;
                }
                var data = {
                    'id'  : id,
                        'title' : title
                      };
                    // 用ajax提交表单
                $.post("{:U('Cash/editBankType')}", data, function(response) {
                  //弹出提示
              window.parent.layer.msg(response.message);

                  //根据请求相应状态提示通知
                  if(response.status){
                    notify("success",response.message);
                    window.parent.layer.close(index);
                window.location.reload();
              }else{
                notify("error",response.message);
              }
                }, 'json');
            }
          });
      });

    //删除银行
    $('.del-bank').click(function(){
      	var id = $(this).parents('tr').data("id");
      	window.parent.layer.confirm('确定删除该银行吗？', {
          	btn: ['确认','取消'] //按钮
          	},function(index){
              	// 用ajax提交表单
              	$.post("{:U('Cash/deleteBankType')}", 'id='+id, function(response) {
                //弹出提示
            	window.parent.layer.msg(response.message);

                //根据请求相应状态提示通知
                if(response.status){
                  	notify("success",response.message);
                  	window.location.reload();
            	}else{
              		notify("error",response.message);
            	}
                //关闭确认对话框
                window.parent.layer.close(index);
          	}, 'json');
		});
	});
	//排序
	function sort(){
      	var list = $("#module_list");
      	var ids  = new Array();
      	if(list.find("tr").length==1){
        	return false;
      	}
		list.dragsort({
        	dragSelector : "tr",  //可以不用设置，他会根据$("#tableid")的类型来决定是tr还是li
          	dragEnd : function(){
         		list.find("tr").each(function(index){
	            	var id = $(this).data("id");
	            	ids.push(id);
          		});
          		var data = {'ids':ids};
             	// 用ajax提交表单
              	$.post("{:U('Cash/saveSort')}", data, function(response) {
		            //弹出提示
		            window.parent.layer.msg(response.message);
	                //根据请求相应状态提示通知
	                if(response.status){
	              		notify("success",response.message);
	              		window.location.reload();
	            	}else{
	              		notify("error",response.message);
	            	}
	          	}, 'json');
	       	},
			scrollSpeed:5,  //默认为5，数值越大拖动的速度越快，为0则拖动时页面不会滚动
  		});
    }
    </script>
    </body>
</html>